<template>
  <div class="container">
    <div class="income">
      <p class="pone">收入分布 income</p>
      <p class="ptwo">￥<span>223.0</span></p>
      <div class="font">
          <el-row>
  <el-col :span="12" >秒杀</el-col>
  <el-col :span="12">拼团</el-col>
  <el-col :span="12">优惠券</el-col>
  <el-col :span="12">折扣</el-col>
</el-row>
      </div>
    </div>
    <div id="distributionChart" class="piechart"></div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      echart: null,
    };
  },
  mounted() {
    this.initEchart(); //首屏渲染图标
  },
  methods: {
    initEchart() {
      //nextTick保证节点百分之百渲染完，才执行里面得代码
      this.$nextTick(() => {
        this.echart = echarts.init(document.getElementById("distributionChart"));
        this.echart.setOption(this.option());
      });
    },
    option() {
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048 },
              { value: 735 },
              { value: 580 },
              { value: 484 },
            ],
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang='stylus' scoped>
.container {
   width: 290px;
  height: 140px;
   border-radius: 5px;
  position: relative;
  background-color: white;
  margin-left: 25px;
}
.income {
  position: absolute;
  right: 0;
}
.income .pone {
  font-size: 10px;
  text-align: center;
  font-weight: bolder;
}
.income .ptwo {
  text-align: center;
  font-size: 12px;
}
.ptwo span {
  font-size: 20px;
  font-weight: bolder;
}
.font{
    font-size: 10px;
    
}
.piechart {
   width: 170px;
  height: 130px;
}
</style>